<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>电子时钟</title>
    <style>
      .clock {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 700px;
        height: 200px;
        background-color: rgb(58, 58, 58);
        border-radius: 20px;
        padding: 50px;
      }
      .screen {
        height: 100%;
        background-color: rgb(167, 184, 145);
        border: 8px solid white;
        box-sizing: border-box;
        text-align: center;
        border-radius: 14px;
      }
      .screen span {
        font-size: 130px;
        line-height: 184px;
        font-weight: bolder;
        font-family: "黑体";
      }
    </style>
  </head>
  <body>
    <div class="clock">
      <div class="screen">
        <span class="hour">12</span>
        <span class="separator">:</span>
        <span class="minute">00</span>
        <span class="separator">:</span>
        <span class="second">00</span>
      </div>
    </div>
    <script>
      
      let hourEle = document.querySelector(".hour");
      let minuteEle = document.querySelector(".minute");
      let secondEle = document.querySelector(".second");
      setInterval(function() {
        //生成当前的时间对象
        let timeObj = new Date();
        let hour = timeObj
          .getHours()
          .toString()
          .padStart(2, "0");
        // let hour = timeObj.getHours() >= 10 ? timeObj.getHours() : '0' + timeObj.getHours()
        let minute = timeObj
          .getMinutes()
          .toString()
          .padStart(2, "0");
        let second = timeObj
          .getSeconds()
          .toString()
          .padStart(2, "0");
        hourEle.innerText = hour;
        minuteEle.innerText = minute;
        secondEle.innerText = second;
      }, 1000);
    </script>
  </body>
</html>
